<template>
    <div>
      <h1>会员等级修改</h1>
      <table class="table table-bordered">
        <tbody>
            <tr>
                <td align="right">会员等级名称</td>
                <td>
                    <input type="text" v-model="info.LevelName"/>
                </td>
            </tr>
            <tr>
                <td align="right">累计消费金额</td>
                <td>
                    <input type="text" v-model="info.Money"/>
                </td>
            </tr>
            <tr>
                <td align="right">会员等级权益</td>
                <td>
                    <p><input type="checkbox" v-model="checked" @click="checkall"/>全选/全不选</p>
                    <p>
                        <span v-for="item in list" @click="CheckOne"><input type="checkbox" :value="item.RightName" v-model="info.LevelRight"/>{{item.RightName}}</span>
                        
                    </p>
                </td>
            </tr>
            <tr>
                <td align="right"></td>
                <td>
                    <input type="button" value="更新" class="btn btn-primary" @click="ok"/>
                </td>
            </tr>
        </tbody>
      </table>
    </div>
</template>

<script setup lang="ts">

//响应式数据
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import {useRouter,useRoute} from 'vue-router';
import { ListFormat } from 'typescript';
const router=useRouter();
const route=useRoute();

//反填
const detail=()=>{
    axios({
        url:'https://localhost:7193/api/Member/FtMemberLevel',
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        console.log(res);
        Object.assign(info,res.data);
        info.LevelRight=res.data.LevelRight.split(',');
    })
}

//----------------权益---------

let list:any=ref([]);

onMounted(()=>{
    getRight();
    detail();
})

const getRight=()=>{
    axios({
        url:'https://localhost:7193/api/Member/GetMuberlist',
        method:'get',
    })
    .then(res=>{
        console.log(res);
        Object.assign(list.value,res.data);
    })
}
//-------------------------------------------
//全选
let checked:any=ref(false);
const checkall=()=>{
    checked.value=!checked.value;
    if(checked.value=true){
        info.LevelRight=list.value.map((item:any)=>{
            return item.RightName;
        })
    }
    else{
        info.LevelRight=[];
    }
}
const CheckOne=()=>{
    if(info.LevelRight.length==list.value.length){
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}

//声明变量
let info:any=reactive({
    id:route.query.id,
    LevelName:'',
    Money:'',
    LevelRight:[],
})

//修改
const ok=()=>{
    //1.有效性判断
    if(info.LevelName==''){
        alert('等级名称不能为空');
        return;
    }
    if(info.Money==''){
        alert('累计金额不能为空');
        return;
    }
    info.LevelRight=info.LevelRight.toString();
    //2.发送网络请求
    axios({
    url:'https://localhost:7193/api/Shop/UpdateShopStateall',
    method:'put',
    data:info,
    })
    .then((res)=>{
        console.log(res);
        //添加成功跳转显示页面
        if(res.data>0){
            alert('修改成功');
            router.push('/memberlevelList');
        }
        else if(res.data==-1){
            alert('等级名称重复');
            return;
        }
        else{
            alert('修改失败');
            return;
        }
    })
    .catch((err)=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>